<form [formGroup]="formModel" (submit)="onSubmit()">
  <div>用户名：<input [class.hasError]="formModel.get('username').invalid && formModel.get('username').touched" type="text" formControlName="username"></div>
  <!--untouched和touched关注的是有没有获取焦点（这2个是相反的）-->
  <div [hidden]="formModel.get('username').valid || formModel.get('username').untouched">
    <div [hidden]="!formModel.hasError('required','username')">    <!--第一个参数是key(可以看控制台的错误key)，第二个参数是想检查的字段的名字-->
      用户名是必填项
    </div>
    <div [hidden]="!formModel.hasError('minlength','username')">
      用户名最小长度是6
    </div>
  </div>
  <div>手机号：<input type="text" formControlName="mobile"></div>
  <!--pristine和dirty关注的是值有没有被改变（这2个是相反的）-->
  <div [hidden]="formModel.get('mobile').valid || formModel.get('mobile').pristine">
    <div [hidden]="!formModel.hasError('mobile','mobile')">
      请输入正确的手机号
    </div>
  </div>
  <!--pending关注的是异步校验-->
  <div [hidden]="!formModel.get('mobile').pending">
    正在校验手机号合法性
  </div>
  <div formGroupName="passwordsGroup">
    <div>密码：<input type="password" formControlName="password"></div>
    <div [hidden]="!formModel.hasError('minlength',['passwordsGroup','password'])">   <!--如果想校验在Group里面的Control，第二个参数就要传一个数组，第一个是formGroupName的值，第二个才是要校验的formControlName的值-->
      密码最小长度是6
    </div>
    <div>确认密码：<input type="password" formControlName="pconfirm"></div>
    <div [hidden]="!formModel.hasError('equal','passwordsGroup')">
      <!--密码和确认密码不匹配-->
      {{formModel.getError('equal','passwordsGroup')?.aaa}}
    </div>
  </div>

  <button type="submit">注册</button>
</form>
<div>
  {{formModel.status}}
</div>
